<template>
  <div class="search_content">
    <div class="search_content_box">
      <slot name="search"></slot>
      <div class="search_box_btn">
        <slot></slot>
        <el-divider v-if="!showPage" direction="vertical"></el-divider>
        <!-- 排序 -->
        <el-popover ref="sortPopoverRefs" placement="bottom" title="排序" width="240" trigger="click" popper-class="popper_class_box">
          <div class="popper_sort_item" v-for="(item, index) in list" :key="index" @click="sortListClick(item)">
            <span>{{ item.title }}</span>
            <div v-if="item.valueIndex != 0" class="sort_icon">
              <el-icon :class="[item.valueIndex === 1 ? 'icon_color_active' : '']"><CaretTop /></el-icon>
              <el-icon :class="[item.valueIndex === 2 ? 'icon_color_active' : '']"><CaretBottom /></el-icon>
              <!-- <i class="el-icon-caret-top" :class="[item.valueIndex === 1 ? 'icon_color_active' : '']"></i>
              <i class="el-icon-caret-bottom" :class="[item.valueIndex === 2 ? 'icon_color_active' : '']"></i> -->
            </div>
          </div>
          <template #reference>
            <div class="sort_box" v-if="!showPage">
              <!-- <el-icon><Sort /></el-icon> -->
              <svg-icon icon-class="sorticon"></svg-icon>
              <span style="margin-left: 3px">排序</span>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, defineProps, defineEmits } from 'vue';
const emit = defineEmits();
const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索文件、文件夹'
  },
  isHaveType: {
    type: String,
    default: 'have' // have 表示有type值 , no 表示没有type, onlyTime只有时间排序
  },
  showPage: {
    type: Boolean,
    default: false
  }
});

// 响应式数据
const searchInput = ref('');
const sortValue = ref(null);
const list: any = ref([]);

// 排序列表
const sortList = reactive([
  {
    title: '文件名称',
    valueIndex: 0,
    value: [{ sortAsc: 'type,real_name' }, { sortDesc: 'type,real_name' }]
  },
  {
    title: '大小',
    valueIndex: 0,
    value: [{ sortAsc: 'type,size' }, { sortDesc: 'type,size' }]
  },
  {
    title: '创建时间',
    valueIndex: 0,
    value: [{ sortAsc: 'type,create_time' }, { sortDesc: 'type,create_time' }]
  }
]);

const noTypeSortList = reactive([
  {
    title: '文件名称',
    valueIndex: 0,
    value: [{ sortAsc: 'label_name' }, { sortDesc: 'label_name' }]
  },
  {
    title: '创建时间',
    valueIndex: 0,
    value: [{ sortAsc: 'create_time' }, { sortDesc: 'create_time' }]
  }
]);

const onlyTimeSortList = reactive([
  {
    title: '创建时间',
    valueIndex: 0,
    value: [{ sortAsc: 'create_time' }, { sortDesc: 'create_time' }]
  }
]);

// 获取当前的排序列表
const getList = () => {
  if (props.isHaveType === 'have') {
    list.value = [...sortList];
  } else if (props.isHaveType === 'no') {
    list.value = [...noTypeSortList];
  } else if (props.isHaveType === 'onlyTime') {
    list.value = [...onlyTimeSortList];
  }
};

// 当 isHaveType 改变时重新获取列表
watch(() => props.isHaveType, getList);

// 初始化获取排序列表
onMounted(getList);

// 输入框回车事件
const inputEnter = () => {
  emit('inputEnter', searchInput.value);
};

// 排序事件
const sortListClick = (item: any) => {
  if (sortValue.value && sortValue.value.title === item.title) {
    item.valueIndex === 2 ? (item.valueIndex = 0) : item.valueIndex++;
  } else {
    // 重置其他排序项
    const targetList = props.isHaveType === 'have' ? sortList : props.isHaveType === 'no' ? noTypeSortList : onlyTimeSortList;
    targetList.forEach((items) => {
      items.valueIndex = 0;
    });
    item.valueIndex++;
  }
  sortValue.value = item;
  emit('sortListClick', sortValue.value);

  //   // 关闭弹出框
  //   if (this.$refs.sortPopoverRefs) {
  //     this.$refs.sortPopoverRefs.showPopper = false;
  //   }
};

// return {
//   searchInput,
//   sortValue,
//   list,
//   inputEnter,
//   sortListClick
// };
</script>

<style scoped lang="scss">
:deep(.inputClass) {
  width: 220px;
  //   padding-left: 20px;
}

:deep(.el-input__inner) {
  border: 0;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  padding: 1px 0;
}

.search_content_box {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  height: 48px;
  padding-right: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #eee;
}

:deep(.search_box_btn) {
  display: flex;
  align-items: center;
}

:deep(.sort_box) {
  color: #999;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  padding: 8px;
  transition: all 0.2s ease;
  margin-left: 5px;

  :deep(span) {
    color: #666;
    font-size: 14px;
    margin-left: 5px;
  }

  &:hover {
    color: #6698ff !important;
    background: rgba(102, 152, 255, 0.1);

    :deep(span) {
      color: #6698ff !important;
    }
  }
}

:deep(.el-divider--vertical) {
  margin: 0 10px;
}

.popper_sort_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
  color: #333;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  .sort_icon {
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    font-size: 0;

    .el-icon-caret-bottom {
      margin-top: -5px;
    }

    i {
      color: #666;
      font-size: 12px;
    }
  }

  .icon_color_active {
    color: #6698ff !important;
  }
}
</style>

<style lang="scss">
.popper_class_box {
  font-size: 14px;
  padding: 12px 0;

  .el-popover__title {
    color: #cacaca;
    font-size: 14px;
    padding: 0 20px;
  }
}
</style>
